<!--
 * @页面名称:列表左侧图像组件
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="avatar">
    <img width="80" heigth="80" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.avatar {
  position: relative;
  width: 80px;
  height: 80px;
  img {
    width: 100%;
    height: 100%;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent transparent #419cf9 transparent;
    transform: rotate(90deg);
  }
  &::after {
    content: "⭐";
    position: absolute;
    top: 11%;
    left: 10%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-family: Arial, sans-serif;
  }
}
</style>
